<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页涂鸦版</title>
    <style>
        canvas#c {
            border: 1px solid #ccc;
            /* background: url(http://i.imgur.com/yf6d9SX.jpg); */
            position: relative;
            left: 0;
            top: 0;
            z-index: 2;
        }
    </style>
</head>
<div style="text-align:center">
    <canvas id="c" width="930" height="500"></canvas>
    <br>
    <button id="marker">Marker</button>
    <button id="highlight">Highlight</button>
    <button id="clear">Clear</button>
</div>

<script>
    var el = document.getElementById('c');
    var ctx = el.getContext('2d');
    var isDrawing;
    var _highlight = false;

    function marker() {
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'rgba(0,0,0,1)';
        ctx.globalCompositeOperation = 'source-over';
    }

    function highlight() {
        ctx.lineWidth = 15;
        ctx.strokeStyle = 'rgba(255,255,0,0.4)';
        ctx.globalCompositeOperation = "multiply";
        if (ctx.globalCompositeOperation !== "multiply") // use multiply if available
            ctx.globalCompositeOperation = 'destination-over'; // fallback mode
    }

    document.getElementById("marker").addEventListener("click", function() {
        _highlight = false;
    });

    document.getElementById("clear").addEventListener("click", function() {
        ctx.clearRect(0, 0, el.width, el.height);
        ctx.beginPath();
    });


    document.getElementById("highlight").addEventListener("click", function() {
        _highlight = true;
    });

    el.onmousedown = function(e) {
        var pos = getMouse(e);
        isDrawing = true;
        ctx.beginPath();
        _highlight ? highlight() : marker();
        ctx.lineJoin = ctx.lineCap = 'round';
        ctx.moveTo(pos.x, pos.y);
    };

    el.onmousemove = function(e) {
        if (isDrawing) {
            var pos = getMouse(e);
            ctx.lineTo(pos.x, pos.y);
            ctx.stroke();
        }
    };
    el.onmouseup = function() {
        isDrawing = false;
    };

    function getMouse(e) {
        var rect = el.getBoundingClientRect();
        return {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        }
    }
</script>

<body>

</body>

</html>